@layer utilities {
    .pixel-corners {
        clip-path: polygon(
            0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, 
            calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), 
            calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 
            4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px)
        );
    }
    .game-shadow {
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2), 
                    inset 0 0 0 4px rgba(0, 0, 0, 0.1);
    }
    .tetris-grid {
        background-size: 20px 20px;
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    }
}

@layer base {
    :root {
        --font-game: '"Press Start 2P"', system-ui, sans-serif;
    }
    body {
        font-family: var(--font-game);
    }
}